<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        .di {
            width: 300px;
            height: 200px;
            border: 1px solid red;
        }
        p {
            text-align: center;
        }
        .dd {
            font-size: 18px;
            background: yellow;
        }
        .d2 {
            font-size: 14px;
            background: red;
        }
    </style>
</head>
<body>
<div class="di dd">
    <p>11111111111111111111111</p>
    <p>11111111111111111111111</p>
    <p>11111111111111111111111</p>
    <p>11111111111111111111111</p>
</div>
<button>click</button>
<script>
    $('button').click(function () {
//        $('.dd').empty();          //清空元素
//          $('div').addClass('d2');      //增加类名
//          $('div').removeClass('dd');    //删除类名
          $('div').toggleClass('d2');      //类名切换
    })
</script>
</body>
</html>